import './public-path'
import {
    createApp
} from 'vue'
import {
    createRouter,
    createWebHistory
} from 'vue-router';
import {
    routes
} from './router'
import ElementPlus from 'element-plus'
import App from './App.vue'
import store from './store'
import 'element-plus/dist/index.css'

let instance = null
let router = null

function render(props = {}) {
    const {
        container
    } = props;
    router = createRouter({
        history: createWebHistory(window.__POWERED_BY_QIANKUN__ ? '/foo/' : '/'),
        routes,
    });
    instance = createApp(App)
    instance.use(router)
        .use(store)
        .use(ElementPlus)
        .mount(container ? container.querySelector('#app') : '#app')
}

// 独立运行时
if (!window.__POWERED_BY_QIANKUN__) {
    render();
}

export async function bootstrap() {
    console.log('[vue] vue app bootstraped');
}
export async function mount(props) {
    console.log('[vue3] props from main framework', props);
    let user = null
    props.onGlobalStateChange((state) => {
        // state: 变更后的状态; prev 变更前的状态
        user = state.user
        store.commit('setUser', user)
    }, true)
    render(props)


}
export async function unmount() {
    instance.unmount();
    instance = null;
    router = null;
}